<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉框</title>


</head>
<body>

<select id="sltCity">

</select>


<div id="app">

    <input type="text" v-model="message"> {{message}}

    <select>
        <option v-for="city in cities" :value="city.id">{{city.name}}</option>
    </select>

    <hr>
   <div>
       1. 城市总数：{{  cities.length  }}
   </div>
    <div>
        2. 城市总数：{{  getTotal() }}
    </div>
    <div>
        3.城市总数:{{total}}-{{counter1}}
    </div>


</div>

</body>
<script src="db/cities.js"></script>
<script src="../../lib/vue.global.js"></script>
<script>





    /**
     *   vue的生命周期
     *   生命周期 和 生命周期函数 或者 钩子
     *      create  -- 创建 ，vue实例被创建，实例的数据、方法等和页面模版没有关系
     *         beforeCreate  created
     *      mount   -- 挂载，vue实例中的数据 渲染到 页面模版上
     *         beforeMount  mounted
     *      update  -- 数据更新 vue中的数据发生变化
     *         beforeUpdate updated
     *      unmount -- 卸载
     *
     * */

     /**
      *    created
      *       创建vue实例，data被创建 ，可以访问cities
      *       把外界数据赋值给 cities
      *       mount --- cities 渲染页面
      *
      *    mounted
      *        创建vue实例，data被创建 ，可以访问cities
      *        mount --- cities---空数据 渲染页面
      *        把外界数据赋值给 cities 重新渲染页面
      * */


    /**
     * 数据 和 对数据的操作
     * */
    var app = Vue.createApp({
        data:function (){
            return {
                 cities:[],
                message:'hello',
                counter1:0
            }
        }
        // ,created:function (){
        //     this.cities = cities;
        // }
        , mounted:function (){
            this.cities = cities;
        },methods:{
            getTotal:function (){
                 return this.cities.length;
            }
        },computed:{
            // 计算属性 - 只有当它相关的数据变化的时候，才会重新计算
             total:function (){
                 this.counter1++;
                 return this.cities.length;
             }
        }
    });

    app.mount('#app');


    /**
     *  页面初始化-版本1
     *
     *    DOM
     *       Document Object Model
     * */

    function initSelect(){
        var sltCity=  document.getElementById('sltCity');

        for (var i = 0; i < cities.length; i++) {

            var opt = document.createElement('option');

            opt.value = cities[i].id;
            opt.innerText=cities[i].name;

            sltCity.append(opt);
        }
    }

    //initSelect();
</script>
</html>